<template>
  <div id="Logs">
    <!-- 右侧卡片区域 -->
    <!-- 操作列表卡片区 -->
    <el-card class="box-card">
      <!--查询-->
      <el-form :inline="true" :model="logVo" class="demo-form-inline">
        <el-form-item label="操作人">
          <el-input @keyup.enter.native="search" clearable="" @clear="search" v-model="logVo.username"
                    placeholder="操作人"></el-input>
        </el-form-item>
        <el-form-item label="ip地址">
          <el-input @keyup.enter.native="search" clearable="" @clear="search" v-model="logVo.ip"
                    placeholder="ip地址"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
          <el-button @click="deleteLogs(selected)" :disabled="this.selected.length === 0" class="el-icon-delete">批量
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 表格区域 -->
      <template>
        <el-table
          border
          stripe
          :data="LogData"
          style="width: 100%;"
          height="460"
          @selection-change="selectChange">

          <el-table-column type="selection" width="55" align="center"></el-table-column>
          <el-table-column prop="username" label="操作人" width="150"></el-table-column>
          <el-table-column prop="operation" label="操作" width="150"></el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="method" label="方法" width="180"></el-table-column>
          <el-table-column :show-overflow-tooltip="true" prop="params" label="参数" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.params }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="time" label="耗时" width="120" sortable="">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.time>=2000" size="mini" type="danger">
                {{scope.row.time+'毫秒'}}
              </el-tag>
              <el-tag v-else-if="scope.row.time>=1000&&scope.row.time<=2000" size="mini">
                {{scope.row.time+'毫秒'}}
              </el-tag>
              <el-tag v-else type="success" size="mini">
                {{scope.row.time+'毫秒'}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="location" label="操作地点" width="240"></el-table-column>
          <el-table-column prop="ip" label="IP地址" width="140"></el-table-column>
          <el-table-column prop="createTime" label="时间" sortable="" width="180"></el-table-column>

          <el-table-column label="操作" width="100px;" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="mini" icon="el-icon-delete"
                         @click="del(scope.row.id)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!--分页-->
      <el-pagination
        style="padding-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[6, 10, 20, 30]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"></el-pagination>
    </el-card>
  </div>
</template>

<script>
  import { findLogPage, deleteLogById, deleteLogsByIds } from '../../../api/system/logs'

  export default {
    data () {
      return {
        selected: [],//选中的值显示
        LogData: [],
        size: 7,
        total: 100,//总共多少条数据
        current: 1,
        logVo: {
          username: '',
          ip: '',
        },
      }
    },

    created () {
      this.getLogList()
    },
    methods: {

      //批量删除操作日志
      async deleteLogs () {
        const ids = this.selected.map(item => item.id).join() //获取所有选中行的id组成的字符串，以逗号分隔
        const res = await this.$confirm(
          '此操作将永久批量删除系统日志, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
        if (res === 'confirm') {
          const { data: res } = await deleteLogsByIds(ids)
          if (res.code === 200) {
            this.$message.success('系统日志删除成功')
            this.getLogList()
          }
        }
      },
      selectChange (sel) {
        this.selected = sel
      },

      //搜索
      search () {
        this.current = 1
        this.getLogList()
      },

      //加载系统日志列表
      getLogList () {
        findLogPage(this.current, this.size, this.logVo).then(res => {
          if (res) {
            this.total = res.data.data.total
            this.LogData = res.data.data.records
          }
        })
      },
      //删除系统日志
      async del (id) {
        const res = await this.$confirm(
          '此操作将永久删除该系统日志, 是否继续?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
        if (res === 'confirm') {
          const { data: res } = await deleteLogById(id)
          if (res.code === 200) {
            this.$message.success('系统日志删除成功')
            this.getLogList()
          }
        }
      },
      //当每页条数改变
      handleSizeChange (val) {
        this.size = val
        this.getLogList()
      },

      //当前页码改变
      handleCurrentChange (val) {
        this.current = val
        this.getLogList()
      },
    },
  }
</script>

<style>

</style>
